<template>
  <div>
    <div>
      <el-upload class="upload"
        action="https://jsonplaceholder.typicode.com/posts/">
        <el-button type="primary" size="mini" style="height:40px">上传图片</el-button>
      </el-upload>
      <el-button type="success" plain size="mini" class="group-button" @click="test">分组管理</el-button>
      <div class="select-group">
        <span>选择分组：</span>
        <el-select v-model="groupId" placeholder="请选择" @change="changeGroup">
          <el-option label="未分组" value="0"></el-option>
          <el-option
            v-for="item in group"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="search">
        <el-input class="search-input" placeholder="请输入图片名称"></el-input>
        <el-button type="primary" plain size="mini" style="height:40px">查 询</el-button>
      </div>
    </div>
    
    <div class="pic-panel">
      <div :class="activeId == pic.id ? 'pic-container-active' : 'pic-container'" v-for="pic in picArray" :key="pic.id">
        <el-image
          style="width: 150px; height: 150px"
          :src="pic.pic_url" @click="selectPic(pic.id,pic.pic_url)">
        </el-image>
        <div class="pic-name">{{pic.name}}</div>
        <div class="pic-close"><i class="el-icon-circle-close"/></div>
        <div class="pic-size">{{ pic.height | intpart }}×{{ pic.width | intpart }}</div>
      </div>
      
    </div>


    <el-dialog title="分组管理" :visible.sync="isUploadGroup" :modal="false">
      分组管理
    </el-dialog>
  </div>
</template>

<script>
import { getPictureGroup, getPictureByGroup } from '@/api/picture'
export default {
  data() {
    return {
      groupId: '0',
      group: [],
      picArray: [],
      activeId: '',
      selectPicUrl: '',
      isUploadGroup: false
    }
  },
  mounted() {
    getPictureGroup().then(response => {
      if(response.status == 200){
        this.group = response.data;
      }else{
        this.$message.error(response.message)
      }
    })
  },
  methods: {
    changeGroup(){
      const params = { id: this.groupId, key: '000802', limit: 15, page: 1 }
      getPictureByGroup(params).then(response => {
        if(response.status == 200){
          this.picArray = response.data
          this.activeId = ''
          this.selectPicUrl = ''
        }else{
          this.$message.error(response.message)
        }
      })
    },
    selectPic(id,url){
      this.activeId = id;
      this.selectPicUrl = url;
    },
    test() {
      this.$message.error('66666')
    }
  },
  filters: {
    intpart(value) {
      if(!value) return value;
      return value.split('.')[0]
    }
  }
}
</script>

<style lang="css" scoped>
.upload{
  display: inline-block;
}
.group-button{
  display: inline-block;
  height: 40px;
  margin-left: 10px;
}
.search{
  height: 40px;
  line-height: 40px;
  padding: 0 30px;
  display: inline-block;
}
.search-input{
  width: 180px;
}
.select-group{
  display: inline-block;
  margin-left: 50px;
}
.pic-panel{
  padding: 20px 0;
}
.pic-container{
  height: 180px;
  display: inline-block;
  margin: 0 20px 30px 20px;
}
.pic-container-active{
  height: 180px;
  display: inline-block;
  margin: 0 20px 30px 20px;
  border: 2px solid #66b1ff
}
.pic-name{
  width: 150px;
  text-align: center;
  font-size: 14px;
  padding: 5px 0;
}
.pic-close{
  height: 30px;
  width: 30px;
  font-size: 30px;
  position: relative;
  top: -180px;
  left: 120px;
  cursor: pointer;
  color: #8f8f8f;
}
.pic-close:hover{
  color:#303133;
}
.pic-size{
  width: 150px;
  height: 30px;
  text-align: center;
  background-color: #00000069;
  line-height: 30px;
  position: relative;
  top: -89px;
  font-weight: 600;
  color: #fff;
}
</style>